<template>
  <el-card>
    <h1>{{ id ? "编辑" : "创建" }}报名</h1>
    <el-button
      @click="
        ispage = 1;
        iscolor = 1;
      "
      :type="iscolor === 1 ? 'primary' : ''"
    >
      单人项目
    </el-button>
    <el-button
      @click="
        ispage = 2;
        iscolor = 2;
      "
      :type="iscolor === 2 ? 'primary' : ''"
    >
      团体项目
    </el-button>
    <div style="margin:30px"></div>
    <!-- 班级班名 -->
    <div v-if="ispage == 1">
      <el-row :gutter="50" v-for="(item, i) in xiangmuShuzu" :key="item._id">
        <el-col :span="6" class="elrowdy">
          {{ item.name }}
        </el-col>
        <el-col :span="6">
          <el-select v-model="bmxssz[i].stu1" placeholder="请选择学生">
            <el-option
              v-for="it in stuShuzu"
              :key="it._id"
              :label="it.stuName"
              :value="it._id"
            />
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select v-model="bmxssz[i].stu2" placeholder="请选择学生">
            <el-option
              v-for="it in stuShuzu"
              :key="it._id"
              :label="it.stuName"
              :value="it._id"
            />
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select v-model="bmxssz[i].stu3" placeholder="请选择学生">
            <el-option
              v-for="it in stuShuzu"
              :key="it._id"
              :label="it.stuName"
              :value="it._id"
            />
          </el-select>
        </el-col>
      </el-row>
      <div class="btndiv">
        <el-button type="primary" @click="baoming()">报名</el-button>
      </div>
    </div>
    <!-- 修改报名 -->
    <el-form
      v-if="ispage == 3"
      :model="form1"
      label-width="80px"
      label-position="left"
    >
      <el-form-item label="参赛项目">
        <el-select v-model="form1.sport">
          <el-option
            v-for="it in xiangmuShuzu"
            :key="it._id"
            :label="it.name"
            :value="it._id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="参赛学生">
        <el-select v-model="form1.student">
          <el-option
            v-for="it in stuShuzu"
            :key="it._id"
            :label="it.stuName"
            :value="it._id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save()">
          报名
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 团体项目 -->
    <el-form
      v-if="ispage == 2"
      :model="form1"
      label-width="80px"
      label-position="left"
    >
      <el-form-item label="参赛项目">
        <el-select v-model="form1.sport">
          <el-option
            v-for="it in xiangmuShuzu"
            :key="it._id"
            :label="it.name"
            :value="it._id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="参赛学生">
        <el-select v-model="form1.student">
          <el-option
            v-for="it in stuShuzu"
            :key="it._id"
            :label="it.stuName"
            :value="it._id"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item
        label="成绩"
        v-if="id"
      >
        <el-input v-model="form1.score" />
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" @click="save()">
          报名
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
export default {
  props: {
    id: {},
  },
  data() {
    return {
      bmxssz: [
        {
          stu1: "",
          stu2: "",
          stu3: "",
        },
        {
          stu1: "",
          stu2: "",
          stu3: "",
        },
        {
          stu1: "",
          stu2: "",
          stu3: "",
        },
        {
          stu1: "",
          stu2: "",
          stu3: "",
        },
        {
          stu1: "",
          stu2: "",
          stu3: "",
        },
        {
          stu1: "",
          stu2: "",
          stu3: "",
        },
        {
          stu1: "",
          stu2: "",
          stu3: "",
        },
        {
          stu1: "",
          stu2: "",
          stu3: "",
        },
        {
          stu1: "",
          stu2: "",
          stu3: "",
        },
        {
          stu1: "",
          stu2: "",
          stu3: "",
        },
        {
          stu1: "",
          stu2: "",
          stu3: "",
        },
        {
          stu1: "",
          stu2: "",
          stu3: "",
        },
      ],
      ispage: 1,
      iscolor: 1,
      form1: {
        student: "",
        sport: "",
        daoci: null,
      },
      form2: {
        name: "",
        sport: "",
        daoci: null,
      },
      stuShuzu: [],
      xiangmuShuzu: [],
      categoryList: [],
      formRules: {
        parent: [{ required: true, message: "不能为空", trigger: "blur" }],
        name: [{ required: true, message: "不能为空", trigger: "blur" }],
        num: [{ required: true, message: "不能为空", trigger: "blur" }],
        place: [{ required: true, message: "不能为空", trigger: "blur" }],
        time: [{ required: true, message: "不能为空", trigger: "blur" }],
      },
    };
  },
  watch: {
    // id: {
    //   handler: function() {
    //     console.log(id);
    //   },
    // },
  },
  created() {
    this.id && this.fetch();
    // this.getCastegory();
    this.getStu();
    this.getXiangmu();
    // this.getSport()
  },

  methods: {
    baoming() {
      const xml = this.xiangmuShuzu.length - 1;
      for (var i = xml; i >= 0; i--) {
        if (this.bmxssz[i].stu1 !== "") {
          (this.form1.student = this.bmxssz[i].stu1),
            (this.form1.sport = this.xiangmuShuzu[i]._id),
            this.save();
        }
        if (this.bmxssz[i].stu2 !== "") {
          (this.form1.student = this.bmxssz[i].stu2),
            (this.form1.sport = this.xiangmuShuzu[i]._id),
            this.save();
        }
        if (this.bmxssz[i].stu3 !== "") {
          (this.form1.student = this.bmxssz[i].stu3),
            (this.form1.sport = this.xiangmuShuzu[i]._id),
            this.save();
        }
      }
    },
    async save() {
      let rs;
      if (this.id) {
        rs = await this.$http.put(`rest/applies/${this.id}`, this.form1);
        if (rs.status !== 200) return;
        this.$message.success("修改报名成功");
        // this.stuShuzu = rs.data;
        // console.log(rs.data);
        // this.$router.push({ path: "/apply/list" });
      } else {
        rs = await this.$http.post("rest/applies", this.form1);
        if (rs.status !== 200) return;
        this.$message.success("报名成功");
        // this.stuShuzu = rs.data;
        // console.log("报名");
        // console.log(rs.data);
        // this.$router.push({ path: "/apply/list" });
      }
      this.$router.push({ path: "/apply/list" });
    },

    async getStu() {
      const rs = await this.$http.get("rest/students");
      if (rs.status !== 200) return;
      this.stuShuzu = rs.data;
      console.log("学生");
      console.log(rs.data);
    },
    async getXiangmu() {
      const rs = await this.$http.get("rest/sport_items");
      if (rs.status !== 200) return;
      this.xiangmuShuzu = JSON.parse(JSON.stringify(rs.data));
      console.log("项目");
      console.log(rs.data);
      // const xmrs = JSON.parse(JSON.stringify(this.xiangmuShuzu));
      // for (var i = 0; i <= xmrs.length; i++) {
      //   this.bmxmsz.push(xmrs[i]);
      // }
      // for (var i = 0; i <= this.xiangmuShuzu.length; i++) {
      //   this.baomingShuzu[i].sport = JSON.parse(
      //     JSON.stringify(this.xiangmuShuzu[i])
      //   );
      // }
    },

    async fetch() {
      this.ispage = 3;
      const rs = await this.$http.get(`rest/applies/${this.id}`);
      this.form1 = rs.data;
      console.log(this);
    },
    // async save() {
    //   console.log(this.form);
    //   let rs;
    //   if (this.id) {
    //     this.$refs.formRef.validate(async (valid) => {
    //       if (!valid) return;
    //       rs = await this.$http.put(`rest/applies/${this.id}`, this.form);
    //       if (rs.status !== 200) return;
    //       this.$message({
    //         message: "成功",
    //         type: "success",
    //       });
    //       this.$router.push({ path: "/sportItem/list" });
    //     });
    //   } else {
    //     this.$refs.formRef.validate(async (valid) => {
    //       if (!valid) return;
    //       rs = await this.$http.post("rest/applies", this.form);
    //       if (rs.status !== 200) return;
    //       this.$message({
    //         message: "成功",
    //         type: "success",
    //       });
    //       this.$router.push({ path: "/sportItem/list" });
    //     });
    //   }
    //   // if (rs.status !== 200) return;
    //   // this.$message({
    //   //   message: "成功",
    //   //   type: "success",
    //   // });
    //   // this.$router.push({ path: "/class/list" });
    // },
  },
};
</script>

<style lang="scss" scoped>
.fiw {
  width: 200px;
}
.el-form {
  margin-top: 30px;
}
h1 {
  margin-bottom: 40px;
}
.el-row {
  margin-bottom: 25px;
}
.elrowdy {
  display: flex;
  flex-direction: row-reverse;
}
.btndiv {
  display: flex;
  justify-content: center;
}
</style>
